import React, { ReactNode } from 'react'
import GmHeader from './GmHeader'
import GmFooter from './GmFooter'

interface IProps {
  children: ReactNode
}
export default function index(props: IProps) {
  return (
    <main className="next-container">
      <header className="bg-green-50">
        <GmHeader />
      </header>
      <section>
        <div className="center">
          <div className="center-inner">
            {props.children}
          </div>
        </div>
        {/* <div className="left">left</div>
        <div className="right">right</div> */}
      </section>
      <footer className="bg-blue-100">
        <GmFooter />
      </footer>
      <style jsx>{`
        .next-container{
          width: 100vw; height: 100vh;
          display: flex;
          flex-direction: column;
        }
        /* 全背景下等宽内容居中: 将元素左右padding设置为父元素宽度的50%减去 '等宽内容' 的一半即可，无需设置width */
        .next-container > header,
        .next-container > footer{
          padding: .1em calc(50% - 380px);
          text-align: justify;
          hyphens: auto;
        }
        @media (max-width: 768px) {
          .next-container > header,
          .next-container > footer{
            padding: .1em 5%;
          }
        }
        /* 绝对底部（Sticky Footer）- https://lhammer.cn/You-need-to-know-css/#/zh-cn/sticky-footer */
        .next-container > section {
          flex: 1;
        }
        /* 双飞翼布局 */
        section {
          box-shadow: 0 0 0 1px #eee;
        }
        section::after {
          content: '';
          display: block;
          clear: both;
        }
        section > div {
          // height: 100%; b4a078
          line-height: 1.5em;
          text-align: justify;
          hyphens: auto;
          padding: .1em calc(50% - 380px);
        }
      `}</style>
    </main>
  )
}
